<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="../jquery.js"></script>
    <script src="../axios.js"></script>
</head>

<body>
    <!--说明： 分为三个大模块是按照步骤，最开始只显示找回账号DOM，点击下一步后切换到下一个容器，上一个不显示，依次类推 -->
    <div class="hidbox activeNow" id="one">
        <div class="title">
            <span class="active"><i>1</i>输入找回账号</span>
            <span><i>2</i>回答密保问题</span>
            <span><i>3</i>重置密码</span>
        </div>
        <div class="box">
            <div class="input-item">
                <label>请输入手机号：</label>
                <input type="text" id="phone" name="phone">
            </div>
            <button id="nextone">下一步</button>
        </div>
    </div>
    <!----------------------------------------------------->

    <div class="hidbox" id="two">
        <div class="title">
            <span><i>1</i>输入找回账号</span>
            <span class="active"><i>2</i>回答密保问题</span>
            <span><i>3</i>重置密码</span>
        </div>
        <div class="box">
            <div class="input-item">
                <label> 用户名：</label>
                <input type="text" value="xxxx" disabled id="username">
            </div>
            <div class="input-item">
                <label> 手机号：</label>
                <input type="text" value="xxxx" disabled id="userphone">
            </div>
            <div class="input-item">
                <label>密保问题：</label>
                <input type="text" value="xxxxxxx" disabled id="question">
            </div>
            <div class="input-item">
                <label>密保答案：</label>
                <input type="text" id="answer" name="answer">
            </div>
            <button id="lastone">上一步</button>
            <button id="nexttwo">下一步</button>
        </div>
    </div>
    <!----------------------------------------------------->


    <div class="hidbox" id="three">
        <div class="title">
            <span><i>1</i>输入找回账号</span>
            <span><i>2</i>回答密保问题</span>
            <span class="active"><i>3</i>重置密码</span>
        </div>
        <div class="box">
            <div class="input-item">
                <label>请输入新密码：</label>
                <input type="text" id="useranswer" name="useranswer">
            </div>
            <button id="lasttwo">上一步</button>
            <button id="reset">立即重置</button>
        </div>
    </div>

    <script>
        $(function () {

            let id
            let answer
            let phoneUser
            //输入手机号
            $('#nextone').on('click', function () {


                //获取到输入的手机号
                phoneUser = $('#phone').serialize()
                console.log(phoneUser);
                const url = `http://124.223.14.236:3001/api/user/findPwd?${phoneUser}`
                //在服务器获取此手机号
                axios({
                    method: 'get',
                    url: url,
                    data: phoneUser
                }).then(function (res) {
                    console.log(res.data);
                    //服务器的success中的值可以判断手机号是否被注册
                    if (!res.data.success) {
                        //没注册就告诉他未注册
                        return alert(`${res.data.msg}`)
                    }
                    //注册成功进行下一步，次部分隐藏
                    $('#one').removeClass('activeNow')
                    $('#two').addClass('activeNow')
                    const userName = res.data.data.username
                    const userPhone = res.data.data.phone
                    const Question = res.data.data.question

                    id = res.data.data.id

                    $('#username').val(`${userName}`)
                    $('#userphone').val(`${userPhone}`)
                    $('#question').val(`${Question}`)
                })

            })

            $('#lastone').on('click', function () {
                $('#two').removeClass('activeNow')
                $('#one').addClass('activeNow')
            })

            $('#nexttwo').on('click', function () {
                answer = $('#answer').val()
                const value1 = $('#answer').val().length
                if (value1 === 0) return alert('请输入密保密码')
                $('#two').removeClass('activeNow')
                $('#three').addClass('activeNow')
            })

            $('#lasttwo').on('click', function () {
                $('#two').addClass('activeNow')
                $('#three').removeClass('activeNow')
            })







            $('#reset').on('click', function () {

                const yyy = $('#useranswer').val()
                const dataObj = {
                    id: id + '',
                    password: yyy,
                    answer: answer
                }
                console.log(dataObj);
                const url = 'http://124.223.14.236:3001/api/user/resetPwd'
                axios({
                    method: 'POST',
                    url: url,
                    data: dataObj
                }).then(function (res) {
                    console.log(res.data);
                    if (!res.data.success) return alert(res.data.msg)
                    alert('修改密码成功')
                    location.href = '../01-loginBaseCode/login.html'

                })
            })

        })
    </script>
</body>

</html>